import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import nProgress from 'nprogress'

import 'nprogress/nprogress.css'
// import highlight from 'highlight.js'
// import 'element-ui/lib/theme-chalk/index.css'
import '../public/iconfont/iconfont.css'

// 可以使页面更加流畅
import 'default-passive-events'
// 引入路由首位
import './router/permision'

import {
  Pagination,
  Menu,
  Submenu,
  MenuItem,
  MenuItemGroup,
  Input,
  InputNumber,
  Switch,
  Select,
  Option,
  OptionGroup,
  Button,
  ButtonGroup,
  Table,
  TableColumn,
  DatePicker,
  TimeSelect,
  TimePicker,
  Tooltip,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Tag,
  Alert,
  Icon,
  Progress,
  ColorPicker,
  PageHeader,
  Message,
  Radio,
  Dialog,
  MessageBox,
  RadioButton,
  Loading,
  RadioGroup,
  Notification,
  Empty
} from 'element-ui';

Vue.use(Pagination);
Vue.use(Menu);
Vue.use(Submenu);
Vue.use(MenuItem);
Vue.use(MenuItemGroup);
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Switch);
Vue.use(Select);
Vue.use(Dialog);
Vue.use(Option);
Vue.use(OptionGroup);
Vue.use(Button);
Vue.use(ButtonGroup);
Vue.use(Table);
Vue.use(TableColumn);
Vue.use(DatePicker);
Vue.use(TimeSelect);
Vue.use(TimePicker);
Vue.use(Tooltip);
Vue.use(Form);
Vue.use(FormItem);
Vue.use(Tabs);
Vue.use(TabPane);
Vue.use(Tag);
Vue.use(Alert);
Vue.use(Radio)
Vue.use(RadioButton)
Vue.use(RadioGroup)
Vue.use(Icon);
Vue.use(Progress);
Vue.use(ColorPicker);
Vue.use(PageHeader);
Vue.use(nProgress)
// 不能使用use，不然进入页面会先默认弹出空的message 和 notifiction
Vue.component(Message.name,Message)
Vue.component(Notification.name,Notification)
Vue.component(MessageBox.name,MessageBox)
Vue.use(Empty)
Vue.use(Loading.directive);

Vue.config.productionTip = false

// Vue.use(highlight)
Vue.prototype.$loading = Loading.service;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$echarts = window.echarts;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$message = Message;

// 配置全局进度条
nProgress.inc(0.2)
nProgress.configure({easing:"ease",speed:500,showSpinner:false})

// 创建一个全局指令
Vue.directive('highlight', function (el) {
  console.log("全局指令：", el);
  // 假设该dom对象内容存的是markdown文本
  // 则先获取出来code 标签
  let code = el.querySelectorAll('pre code')

  code.forEach(item => {
    // 根据换行符获取行数，根据获取的行数生成行号
    let rowCount = item.innerHTML.split("\n").length
    // 这里从1开始是因为实际行数只有rowCount-1
    let numbers = ""
    for (let i = 1; i < rowCount; i++) {
      numbers += i + "\n"
    }
    // 设置高亮
    window.hljs.highlightElement(item)
    // 添加自定义行数，后面添加是因为等高亮class设置完毕，不然先加行数会导致高亮失效
    item.parentNode.innerHTML = `<div class="pre-numbering">${numbers}</div>${item.parentNode.innerHTML}`
  })
})

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')